<template>
  <el-form :model="diaForm" ref="DiaFormRef" :rules="rules" status-icon label-width="110px" status>
    <el-form-item label="产品标签" >
      <el-input placeholder="请输入" v-model="diaForm.productTag" style="width: 100%" :disabled="1"  />
    </el-form-item>
<!--    <el-form-item label="技术标签" >-->
<!--      <el-input placeholder="请输入" v-model="diaForm.techTag" style="width: 100%" :disabled="1"  />-->
<!--    </el-form-item>-->
    <el-form-item label="研发标签">
      <el-input placeholder="请输入" v-model="diaForm.researchTag" style="width: 100%" :disabled="1"  />
    </el-form-item>
    <el-form-item label="自定义标签">
      <el-input placeholder="请输入" v-model="diaForm.customTag" style="width: 100%" :disabled="1"  />
    </el-form-item>


    <el-divider content-position="left">
      <span class="title-line">运营标签</span>
    </el-divider>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="专利许可" >
          <el-input placeholder="请输入" v-model="diaForm.patentLicense" style="width: 100%" :disabled="1"  />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="专利转让">
          <el-input placeholder="请输入" v-model="diaForm.patentTranslate" style="width: 100%" :disabled="1"  />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="专利外购">
          <el-input placeholder="请输入" v-model="diaForm.patentOutsource" style="width: 100%" :disabled="1"  />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="专利质押">
          <el-input placeholder="请输入" v-model="diaForm.patentPledge" style="width: 100%" :disabled="1"  />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="专利保全">
          <el-input placeholder="请输入" v-model="diaForm.patentPreserve" style="width: 100%" :disabled="1"  />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="专利获奖">
          <el-input placeholder="请输入" v-model="diaForm.patentAward" style="width: 100%" :disabled="1"  />
        </el-form-item>
      </el-col>
    </el-row>



    <el-divider content-position="left">
      <span class="title-line">诉讼维权</span>
    </el-divider>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="专利无效">
          <el-input placeholder="请输入" v-model="diaForm.patentInvalid" style="width: 100%" :disabled="1"  />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="行政诉讼">
          <el-input placeholder="请输入" v-model="diaForm.lawsuit" style="width: 100%" :disabled="1"  />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="维权保护">
      <el-input placeholder="请输入" v-model="diaForm.rightsProtection" style="width: 100%" :disabled="1"  />
    </el-form-item>
  </el-form>
</template>

<script>
import SelectOption from "@/views/science/components/selectOption/index.vue";
import Table from "@/views/science/components/table/table.vue";
import { reactive, ref, watch } from "vue";
export default {
  components: {
    SelectOption,
    Table,
  },
  props: {
    tagData: Object
  },
  emits: {
    changeTag: null,
    valueFlag2: null,
  },
  setup(props, { emit }) {
    let diaForm = reactive({})
    const rules = reactive({
      productTag: [
        { required: true, message: '请输入产品标签', trigger: 'change', },
      ],
      techTag: [
        { required: true, message: '请输入技术标签', trigger: 'change', },
      ],
      researchTag: [
        { required: true, message: '请输入研发标签', trigger: 'change', },
      ],
      customTag: [
        { required: true, message: '请输入自定义标签', trigger: 'blur' },
      ],
      patentLicense: [
        { required: true, message: '请输入专利许可', trigger: 'change', },
      ],
      patentTranslate: [
        { required: true, message: '请输入专利转让', trigger: 'change', },
      ],
      patentOutsource: [
        { required: true, message: '请输入专利外购', trigger: 'blur' },
      ],
      patentPledge: [
        { required: true, message: '请输入专利质押', trigger: 'change', },
      ],
      patentPreserve: [
        { required: true, message: '请输入专利保全', trigger: 'blur' },
      ],
      patentAward: [
        { required: true, message: '请输入专利获奖', trigger: 'change', },
      ],
      patentInvalid: [
        { required: true, message: '请输入专利无效', trigger: 'change', },
      ],
      lawsuit: [
        { required: true, message: '请输入行政诉讼', trigger: 'blur' },
      ],
      rightsProtection: [
        { required: true, message: '请输入维权保护', trigger: 'change', },
      ],
    })
    watch(diaForm, (newValue, oldValue) => {
      emit("changeTag", diaForm);
    });
    watch(() => props.tagData, (newValue, oldValue) => {
      if (props.tagData) {
        Object.assign(diaForm, newValue)
      }
    }, { deep: true, immediate: true }
    );
    const DiaFormRef = ref()
    const submitForm = async () => {
      DiaFormRef.value.validate(valid => {
        console.log('valid2', valid);
        if (valid) {
          emit('valueFlag2', true)
        } else {
          emit('valueFlag2', false)
        }
      })
    }
    //清空form
    const clearForm = () => {
      DiaFormRef.value.resetFields()
    }
    return {
      diaForm,
      rules,
      submitForm,
      DiaFormRef,
      clearForm,
    }
  }
}
</script>

<style lang="scss" scoped>
.title-line {
  color: #409EFF;
}
</style>
